import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useDoctorData } from "../../hooks/doctors";
import "./css/doctor.scss";
function Doctors() {
  const navigate = useNavigate();
  let { banners, departments, titles } = useDoctorData(); // 原始数据

  let [banners2, setB2] = useState([]); // 展示
  const [name, setName] = useState("");
  const [name2, setName2] = useState("");

  useEffect(() => {
    setB2(banners);
  }, [banners]);
  useEffect(() => {
    if (name) {
      setB2(banners.filter((item: any) => item.name.includes(name)));
    } else if (name2) {
      setB2(banners.filter((item: any) => item.doctorTitleInfo?.name == name2));
    } else {
      setB2(banners);
    }
  }, [name, name2]);
  return (
    <div>
      <p
        onClick={() => {
          navigate(-1);
        }}
        style={{ cursor: "pointer" }}
      >
        &lt;&lt;返回
      </p>
      <input
        type="text"
        onBlur={(e) => {
          // setName()
          setName(e.currentTarget.value);
        }}
        placeholder="搜素医生"
        className="input"
      />
      <h1 className="find">找科室：</h1>
      <ul className="category">
        {departments.map((item: any) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <h1 className="find">找职称：</h1>
      <ul className="category">
        {titles.map((item: any) => (
          <li
            key={item.id}
            onClick={() => {
              setName2(item.name);
            }}
          >
            {item.name}
          </li>
        ))}
      </ul>
      <ul>
        {banners2.map((item: any) => (
          <li className="doctorLi" key={item.id}>
            <p>姓名:{item.name}</p>
            <p>所属医院：{item.hospitalInfo.name}</p>
            <p>医院信息：{item.hospitalInfo.desc.substr(0, 50) + "..."}</p>
            <img
              src={
                item.avatar ||
                "https://pic.rmb.bdstatic.com/bjh/news/d65154c485ec320ec7b01b08590b0ec8.gif"
              }
            />
            <p>擅长：{item.desc.substr(0, 30) + "..."}</p>
            <p>职称：{item.doctorTitleInfo?.name}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Doctors;
